<template>
    <!--租户收款账号管理 -->
    <div>
        <section>
            <el-form
                ref="form"
                :model="queryForm"
                label-width="75px"
                :inline="true"
                class="queryForm adjustCondition"
            >
                <el-row>
                <el-form-item label="通知日期:">
                    <el-date-picker
                        v-model="queryForm.noticeTime"
                        type="datetimerange"
                        range-separator="至"
                        value-format="yyyy-MM-dd HH:mm:ss"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        align="right"
                        class="adjustDate"
                    >
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="收款日期:">
                    <el-date-picker
                        v-model="queryForm.receiveTime"
                        type="datetimerange"
                        range-separator="至"
                        value-format="yyyy-MM-dd HH:mm:ss"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        align="right"
                        class="adjustDate"
                    >
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="状态:" label-width="51px">
                    <el-select clearable v-model="queryForm.state" placeholder="全部">
                        <el-option
                            v-for="item in  $dictUtils.getDictList('state')"
                            :key="item.value"
                            :label="item.label"
                            :value="Number(item.value)">
                        </el-option>
                    </el-select>
                </el-form-item>
                </el-row>
                <el-row>
                <el-form-item label="客户名称:">
                    <el-input
                        v-model="queryForm.names"
                        size="small"
                        placeholder="请输入客户名称"
                    ></el-input>
                </el-form-item>
                <el-form-item>
                    <div class="but-container">
                        <el-button
                            type="primary"
                            size="small"
                            style="margin-right:5px"
                            class="search-btn"
                            @click="
                getList(
                  page,
                  orderBy.name,
                  orderBy.method,
                  queryForm.names,
                  queryForm.noticeTime,
                  queryForm.receiveTime,
                  queryForm.state
                )
              "
                        >查询
                        </el-button
                        >
                        <el-button size="small" @click="reset">重置</el-button>
                    </div>
                </el-form-item>
                </el-row>
            </el-form>
        </section>
        <div>
            <el-button
                type="primary"
                size="small"
                @click="add"
            >新增
            </el-button
            >
            <section class="right-but" style="display:flex">
                <el-button type="text" style="margin-right:-13px" @click="getList(page,orderBy.name,orderBy.method)">
                    <img style="width:44px;height:36px;" src="~@/assets/img/shuaxin.png">
                </el-button>
                <PopoverBut :checkedProps="checkedProps" :options="options" @getCheckeds="handlerCloumn"></PopoverBut>
            </section>
        </div>


        <el-table
            size="mini"
            v-loading="loading"
            :data="tableData"
            style="width: 100%; margin-top: 10px"
            border
            :header-cell-style="{
        'background-color': '#eeeeee !important',
      }"
            :row-class-name="tableRowClassName"
            @sort-change="sortthiscolumn"
        >
            <el-table-column type="index" label="序号" width="70" align="center">
                <template slot-scope="scope">
          <span>{{
                  (page.pageNo - 1) * page.pageSize + scope.$index + 1
              }}</span>
                </template>
            </el-table-column>
            <el-table-column prop="notificationCode" label="通知编号" min-width="190px" :show-overflow-tooltip="true">
                <template slot-scope="scope">
                    {{scope.row.notificationCode |noValue}}
                </template>
            </el-table-column>
            <el-table-column prop="companyName" label="客户名称" min-width="150px"></el-table-column>
                <el-table-column prop="payMode" label="支付方式" width="110px">
                    <template slot-scope="scope">
                        {{$dictUtils.getDictLabel("payMode", scope.row.payMode, "")}}
                    </template>AccountingProcess
                </el-table-column>
            <el-table-column prop="noticeMoney" label="通知金额" width="110px" align="right">
                <template slot-scope="scope">
                    {{scope.row.noticeMoney | thousandSep}}
                </template>
            </el-table-column>
            <el-table-column prop="actualMoney" label="实收金额" width="110px"  align="right">
                <template slot-scope="scope">
                    {{scope.row.actualMoney | thousandSep}}
                </template>
            </el-table-column>
            <el-table-column prop="noticePeople" min-width="110px" label="通知人">
                <template slot-scope="scope">
                    {{scope.row.noticePeople |noValue}}
                </template>
            </el-table-column>
            <el-table-column prop="noticeTime" min-width="200px" label="通知时间">
                <template slot-scope="scope">
                    {{scope.row.noticeTime | noValue}}
                </template>
            </el-table-column>
            <el-table-column prop="receivePeople" min-width="110px" label="收款人">
                <template slot-scope="scope">
                    {{scope.row.receivePeople |noValue}}
                </template>
            </el-table-column>

            <el-table-column prop="state" label="状态" sortable="custom" width="110px" align="center">
                <template slot-scope="scope">
                    <section class="activate-state" v-if="scope.row.state===1">
                        <i></i>
                         {{ $dictUtils.getDictLabel("state", scope.row.state, "") }}
                    </section>
                    <section class="inactive-state" v-else>
                        <i></i>
                        {{ $dictUtils.getDictLabel("state", scope.row.state, "") }}
                    </section>
                </template>
            </el-table-column>

            <span v-for="(item, index) in checkedProps" :key="index">
                <el-table-column prop="receiveTime" :label="item" v-if="item==='收款时间'" min-width="200px">
                <template slot-scope="scope">
                    {{scope.row.receiveTime | noValue}}
                </template>
            </el-table-column>
        <el-table-column prop="createDate" :label="item"  min-width="200px" v-if="item==='创建时间'">
            <template slot-scope="scope">
                {{scope.row.createDate | noValue}}
            </template>
        </el-table-column>
          <el-table-column prop="createBy.loginName" min-width="110px" :label="item" v-if="item==='创建人'">
              <template slot-scope="scope">
                  <span v-if="scope.row.createBy">
                      <span v-if="scope.row.createBy.loginName">
                          {{scope.row.createBy.loginName | noValue}}
                      </span>
                      <span v-else>--</span>
                  </span>
                  <span v-else>--</span>
              </template>
          </el-table-column>
          <el-table-column prop="updateDate" :label="item"  min-width="200px" v-if="item==='上次操作时间'">
              <template slot-scope="scope">
                  {{scope.row.updateDate | noValue}}
              </template>
          </el-table-column>
          <el-table-column prop="updateBy.loginName" min-width="120px" :label="item" v-if="item==='上次操作人'">
              <template slot-scope="scope">
                  <span v-if="scope.row.updateBy">
                      <span v-if="scope.row.updateBy.loginName">
                          {{scope.row.updateBy.loginName | noValue}}
                      </span>
                      <span v-else>--</span>
                  </span>
                  <span v-else>--</span>
              </template>
          </el-table-column>

      </span>

            <el-table-column prop="address" label="操作" width="234">
                <template slot-scope="scope">
                    <template v-for="item in $dictUtils.getDictList('state')">
                        <el-link type="primary"
                                 v-if="item.value !=='-1'&&hasPermission('finance:financeReceive:edit')&& item.value!==(scope.row.state+'')"
                                 :underline="false" @click="editState(item.value,scope.row)"
                                 :disabled="(scope.row.state===-1&& item.value==='0')||item.value==scope.row.state">
                            {{ item.label }}
                        </el-link>
                    </template>
                    <el-link type="primary" :underline="false" @click="edit(scope.row)"
                             v-if="hasPermission('finance:financeReceive:edit')"
                    >修改
                    </el-link
                    >
                    <el-link v-if="hasPermission('finance:financeReceive:del')"
                             type="primary"
                             :underline="false"
                             @click="del(scope.row.id,scope.row.state)"
                    >删除
                    </el-link
                    >
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :page-size="page.pageSize"
            :current-page="page.pageNo"
            layout="total,prev, pager, next, jumper"
            :total="page.total"
        >
        </el-pagination>
        <EditForm
            ref="EditForm"
            @refreshDataList="getList(page,orderBy.name,orderBy.method)"
        ></EditForm>

    </div>
</template>
<script>
    import {getList, getById, del, updateState} from '@/api/finance/FinanceReceive.js';
    import EditForm from './FinanceReceiveEditForm'
    import PopoverBut from '@/components/button/popoverBut'

    const options1 = []
    const cityOptions = ['上海', '北京']
    export default {
        components: {
            EditForm,
            PopoverBut
        },

        data() {
            return {
                pickerOptions: {
                    shortcuts: [
                        {
                            text: "最近一周",
                            onClick(picker) {
                                const end = new Date();
                                const start = new Date();
                                start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                                picker.$emit("pick", [start, end]);
                            },
                        },
                        {
                            text: "最近一个月",
                            onClick(picker) {
                                const end = new Date();
                                const start = new Date();
                                start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                                picker.$emit("pick", [start, end]);
                            },
                        },
                        {
                            text: "最近三个月",
                            onClick(picker) {
                                const end = new Date();
                                const start = new Date();
                                start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                                picker.$emit("pick", [start, end]);
                            },
                        },
                    ],
                },
                msg: '',
                data: [],
                repeatIds: [],
                checkedProps: options1,
                ShowCloum: {createDate: ''},
                options: [
                    {label: '收款时间', key: 'receiveTime'},
                    {label: '创建人', key: 'createBy.loginName'},
                    {label: '创建时间', key: 'createDate'},
                    {label: '上次操作人', key: 'updateBy.loginName'},
                    {label: '上次操作时间', key: 'updateDate'}
                ],
                tableData: [],
                orderBy: {
                    name: 'update_date',
                    method: 'desc'
                },
                loading: false,
                page: {
                    pageSize: 10,
                    pageNo: 1,
                    total: 0
                },
                props: 1,
                queryForm: {
                    checkedCities: 0,
                    productName: '',
                    productId: ''
                },
                checkedCities: [],
                cities: cityOptions
            }
        },
        methods: {
            // 获取列表带分页
            getList(params, orderName, orderByAORC, queryNames, noticeTime, receiveTime,state) {
                this.loading = true
                getList({
                    accountDealType: 5,
                    pageSize: params.pageSize,
                    pageNo: params.pageNo,
                    orderBy: orderName,
                    orderByAORC: orderByAORC,
                    companyName: queryNames,
                    state: state,
                    noticeStartTime: noticeTime == null ? null : noticeTime[0],
                    noticeEndTime: noticeTime == null ? null : noticeTime[1],
                    receiveStartTime: receiveTime == null ? null : receiveTime[0],
                    receiveEndTime: receiveTime == null ? null : receiveTime[1]
                }).then((res) => {
                    if (res.data.code === '200') {
                        this.tableData = res.data.result.list
                        this.page.total = res.data.result.count
                    }
                    this.loading = false
                })
            },
            // 删除
            del(ids, state) {
                if (state === 1) {
                    this.$notify.error({
                        title: '错误',
                        message: '已启用，不支持删除！'
                    });
                } else if (state === 0) {
                    this.$notify.error({
                        title: '错误',
                        message: '已停用，不允许任何操作！'
                    });
                } else if (state === -1) {
                    this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then((res) => {
                        del({
                            ids: ids
                        }).then((res) => {
                            if (res.data.code === '200') {
                                this.$message({
                                    type: 'success',
                                    message: '已删除!'
                                })
                                this.getList(this.page, this.orderBy.name, this.orderBy.method)
                            }
                        })
                    });
                }
            },
            // 添加
            add() {
                this.$refs.EditForm.init('add')
            },
            // 改变状态
            editState(state, row) {
                this.$confirm('是否修改状态?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then((res) => {
                    updateState({id: row.id, state: state}).then(res => {
                        if (res.data.code === '200') {
                            this.$message({
                                type: 'success',
                                message: '状态修改成功'
                            })
                            this.getList(this.page, this.orderBy.name, this.orderBy.method)
                        }
                    })
                })
            },
            // 编辑
            edit(row) {
                this.$refs.EditForm.init('edit', row)
            },
            // 是否显示某列数据
            handlerCloumn(e) {
                this.checkedProps = e
                // console.log(e)
            },
            // 重置查询条件
            reset() {
                this.queryForm = {}
                this.getList(this.page, this.orderBy.name, this.orderBy.method)
            },
            // 排序
            sortthiscolumn(a) {
                console.log(a)
                this.orderBy.name = a.prop
                this.page.pageNo = 1
                if (a.order === 'ascending') {
                    this.orderBy.method = 'asc'
                } else {
                    this.orderBy.method = 'desc'
                }
                this.getList(this.page, this.orderBy.name, this.orderBy.method)
            },
            handleSizeChange() {
            },
            handleCurrentChange(e) {
                this.page.pageNo = e
                this.getList(this.page, this.orderBy.name, this.orderBy.method)
                console.log(e)
            },
            tableRowClassName({row, rowIndex}) {
                if (rowIndex % 2 === 1) {
                    return 'warning-row'
                } else {
                    return 'success-row'
                }
            }
        },
        mounted() {
            this.getList(this.page, this.orderBy.name, this.orderBy.method)
        }
    }
</script>
<style lang="scss" scoped>
    ::v-deep .el-input--small .el-input__inner {
        height: 36px;
        line-height: 32px;
        width: 230px;
    }

    ::v-deep .queryForm {
        position: relative;

        .el-row{
            margin-bottom: 0;
            .el-form-item:last-child{
                margin-right: 0;
            }
        }
        .but-container {
            top: 10px;
            margin-left: 10px;
        }

        .el-form-item {
            margin-right: 40px;
            margin-bottom: 20px;
        }
    }

    .el-table .success-row {
        background: #f0f9eb;
    }

    ::v-deep .el-table .warning-row {
        background: #f7f7f7;
    }
</style>
